<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" >
    <meta content="telephone=no" name="format-detection" />
    <title>Document</title>
</head>
<style>
    body,p,h1,h2,h3,ul,li,a{
        margin: 0;
        padding: 0;
        font-family: '微软雅黑';
    }
    body{
        min-width: 1100px;

    }

    ul,li{
        list-style: none;
    }
    a {
        text-decoration:none;
        out-line: none;
    }
    .content{
        width: 80%;
        margin: 0 auto;
    }
    .title .text{
        width: 100%;
        height: 80px;
        resize:none;
        font-size: 24px;
    }
    .title h2{
        font-weight: 500;
        padding-top: 70px;
    }
    .section p{
        font-size: 24px;

    }
    .section .t_left{
        float:left;
    }
    .section .t_right{
        float: right;

        padding-top: 5px;
    }
    .section .main{
        clear: both;
    }
    .section .main .h{
        float: left;
    }
    .section .tables{
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }
    .section .r{
        width: 50%;
        float: left;
        overflow: hidden;
    }
    .tables td{
        height: 40px;
        border: 1px solid #ccc;
        position: relative;
    }
    .tables td input{
        cursor :default;
        width: 100%;
        height: 100%;
        border: 0;
        outline:medium;
        text-align: center;
    }
    .right{
        position: relative;
        background: #f3f3f3;
        height: 260px;
        width: 48%;
        float: right;
        margin-left: 2%;
        margin-top: 10px;
        overflow: auto;
    }
    .right_title .r_left{
        padding-left: 20px;
        font-size: 14px;
        float: left;
        padding-top: 10px;
    }
    .right_title .r_right{
        position: relative;
        font-size: 14px;
        float: right;
        padding-top: 10px;
        padding-right: 8px;
    }
    .btn{
        float: right;
        margin-top: 10px;
    }
    .btn p{
        cursor:pointer;
        float: left;
        line-height: 40px;
        background: #609bf7;
        color: #f3f3f3;
        width: 100px;
        text-align: center;
        margin-left: 20px;
    }
    .tishi_list{
        clear: both;
        overflow: hidden;
        padding: 10px 10px 0 10px;
    }
    .tishi_list .oder{
        float: left;
        font-size: 14px;
    }
    .tishi_list .tisInfo{
        float: left;
        width: 100px;
        margin-left: 10%;

    }
    .tishi_list .daan{
        float: right;
        font-size: 14px;
    }
    .r_input{
        position: absolute;
        left:80px;
        top:10px;
    }
    .r_input input{
        border:1px solid #ccc;
        visibility:hidden;

        background: #f3f3f3;
    }
    html,body{-moz-user-select: none; -khtml-user-select: none; user-select: none;}
    .r_input li{
        margin-bottom:9px;
    }
    .tishi_list .deleter{
        float: right;
        font-size: 12px;

    }
    .deleter img{
        margin-top: 4px;
        width: 14px;
        height:14px;
    }
    .footer{
        clear:both;
        margin: 0 auto;
        width: 300px;
        padding-top: 50px;

    }

    .footer p{
        cursor:pointer;
        margin: 20px;
        width: 100px;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
        background: #609bf7;
        float: left;
        margin-left: 20px;
    }
</style>
<script src="unis/jquery.min.js"></script>
<body>
<div class="content">
    <div class="btn">
        <p>中文</p>
        <p>英文</p>
    </div>
    <div class="title">
        <h2 class="tilength">题干(<span class="tinumber">0</span>/3000)</h2>
        <textarea class="text" placeholder="请根据右侧提示在格子中找出对应的单词／词语／成语"></textarea>
    </div>
    <div class="section">
        <div class="r">
            <p class="t_left">魔方设置（0/0）</p>
            <div class="t_right">
                <span>列</span>

                <select id="h">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option selected = "selected" value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                </select>
                <span>行</span>
                <select id="l">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option selected = "selected" value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                </select>
            </div>
            <div class="main">
                <table class="tables">

                </table>
            </div>
        </div>
        <div class="right_title">
            <p class="r_left">提示设置</p>
            <p class="r_right">请依次按照选项设置提示语，每个提示语最多20个字</p>
        </div>
        <div class="right">

            <ul class="tis">

            </ul>
            <ul class="r_input">
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
                <li class="tiinput">
                    <input type="text" class="tisInfo">
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    <p>预览</p>
    <p>保存</p>
</div>
</body>
<script>


    (function(){
        var opt = {
            getDoms : function(){
                this.doms = {
                    tinumber : $('.tinumber'),
                    text : $('.text'),
                    h : $('#h'),
                    l : $('#l'),
                    tables : $('.tables'),
                    tis : $('.tis'),
                    startArr : new Array(),
                    indexArr : new Array(),
                    tishi_list : $('.tishi_list'),
                    tisInfo : $('.tisInfo'),
                    footer : $('.footer'),
                    btn : $('.btn')
                }
            },
            init : function (){
                var _slef = this;
                _slef.getDoms();
                _slef.addEvent();
                _slef.table_m(_slef)
            },
            addEvent : function(){
                var _slef = this.doms;
                var s = this;
                _slef.btn.find('p').on('click',function(){

                    if($(this).index()==0){
                        window.location.href = window.location.href.replace('indexE.html','index.html')
                    }
                })
                _slef.footer.find('p').on('click',function(){
                    var textArr = new Array();
                    var daan = new Array();
                    var tishi = new Array();
                    var l = _slef.l.val();
                    var h = _slef.h.val();
                    for(var i=0;i<$('.setText').length;i++){
                        textArr.push($('.setText').eq(i).val())
                    }
                    for(var i=0;i<$('.tishi_list').length;i++){
                        daan.push($('.tishi_list').eq(i).find('.daan').html())
                    }
                    for(var i=0;i<$('.tiinput').length;i++){
                        tishi.push($('.tiinput').eq(i).find('.tisInfo').val())
                    }
                    var opt = {
                        textArr : textArr,
                        daan : daan,
                        tishi : tishi,
                        l : l,
                        h : h
                    };
                    localStorage.data = JSON.stringify(opt);
                    if($(this).index()== 0 ){
                        window.location.href = window.location.href.replace('indexE.html','game.html')
                    }
                    if($(this).index()== 1 ){

                    }
                });
                _slef.tis.delegate('.deleter','click',function(ev){
                    var ev = ev||event;
                    ev.stopPropagation();
                    $('.tiinput').eq($(this).parent().index()).remove()
                    _slef.indexArr.splice($(this).parent().index(),1);

                    $(this).parent().remove();
                });
                _slef.text.on('input',function(){
                    //文字限制
                    if($(this).val().length>3000){
                        $(this).val($(this).val().substring(0,3000))
                    }
                    _slef.tinumber.html($(this).val().length)
                });
                _slef.h.on('change',function(){
                    //从新渲染行数
                    s.table_m(s);
                });
                _slef.l.on('change',function(){
                    //从新渲染列数
                    s.table_m(s);
                });
                _slef.tables.delegate('.setText','input',function(){
                    //输入文字
                    var value = $(this).val();
                    var index = $(this).attr('ac');
                    s.textLengt(value,index);
                });
                _slef.tables.delegate('.setText','keydown',function(ev){
                    var ev = ev||event;
                    if(ev.keyCode==8){
                        var value = $(this).val();
                        var index = $(this).attr('ac');
                        s.deleteText(index,value,this)
                    }
                    //删除文字
                });

                _slef.tis.delegate('.tishi_list','click',function(){
                    console.log($(this).index())
                    _slef.tisInfo.eq($(this).index()).css('visibility','visible').css('width',200)
                    _slef.tisInfo.eq($(this).index()).focus();
                });

                _slef.tables.on('mousedown',function(ev){
                    $('.main').off();
                    var arr = new Array();
                    var isone = 0;
                    var hang  =  parseInt(_slef.h.val())-1

                    $('.setText').on('mousemove',function(ev){
                        var index = parseInt($(this).attr('ac'))-2;
                        if ($(this).val() != '' && isone==0) {
                            $(this).css('background', '#ccc');
                            if (arr.indexOf(parseInt($(this).attr('ac')) == -1)) {
                                arr.push(
                                        parseInt($(this).attr('ac'))
                                )

                            }
                        }
                        if($(this).val() != '' && $('.setText').eq(index).css('background')=='rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box'&& $('.setText').eq(index-1-hang).css('background')!='rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box'){
                            $(this).css('background', '#ccc');
                            if (arr.indexOf(parseInt($(this).attr('ac')) == -1)) {
                                arr.push(
                                        parseInt($(this).attr('ac'))
                                )

                            }

                        }
                        if($(this).val() != '' && $('.setText').eq(index-hang).css('background')=='rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box' && $('.setText').eq(index-hang-1).css('background')!='rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box'){
                            $(this).css('background', '#ccc');
                            if (arr.indexOf(parseInt($(this).attr('ac')) == -1)) {
                                arr.push(
                                        parseInt($(this).attr('ac'))
                                )

                            }
                        }
//rgb(96, 155, 247) none repeat scroll 0% 0% / auto padding-box border-box

                        isone++;
                    });
                    $(document).on('mouseup',function(){
                        for(var i=0;i<$('.setText').length;i++){
                            $('.setText').css('background','#ffffff')
                        }
                        $('.setText').off();
                        $(document).off('mouseup');
                        var uniqueArr  = arr.unique();
                        if(uniqueArr[0]!=undefined) {
                            _slef.indexArr.push(uniqueArr);
                        }
                        s.rightTemplate(_slef,s);
                        $('.main').delegate('.setText','mousemove',function(ev){
                            for (var i = 0; i < _slef.indexArr.length; i++) {
                                if (_slef.indexArr[i].length > 1) {
                                    if (_slef.indexArr[i].indexOf(parseInt($(this).attr('ac'))) != -1) {
                                        for (var j = 0; j < _slef.indexArr[i].length; j++) {
                                            $('.setText').eq(_slef.indexArr[i][j] - 1).css('background', '#609bf7').css('color', '#ffffff')
                                        }
                                    }
                                }
                            }
                        });
                        $('.main').delegate('.setText','mouseout',function(ev){
                            for(var i=0;i<$('.setText').length;i++){
                                if($('.setText').eq(i).css('background')!='rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box') {
                                    $('.setText').eq(i).css('background', '#ffffff').css('color','#000')
                                }
                            }

                        });
                    })
                })
            },
            clearRight : function(_slef){
                var arr = new Array();
                var text = '';
                for(var i=0;i< $('.tishi_list').length;i++){
                    arr.push($($('.tishi_list')[i]).find('.daan').html())
                }
                var as = arr.unique();
                for(var i=0;i<as.length;i++){
                    if(as[i].length<2){
                        as.splice(i,1,'')

                    }
                }
                for(var i=0;i<as.length;i++) {
                    if (as[i] != '') {
                        text += '<li class="tishi_list">' +
                                '<p class="oder">' + parseInt(i+1) + '</p>' +
                                '<p class="deleter">' +
                                '<img src="img/timg.jpg" alt=""></p>' +
                                '<p class="daan">'+ as[i] +'</p>'
                    }
                }
                _slef.tis.html(text);
            },
            rightTemplate : function(_slef,s){
                var text = '';
                var ar = new Array();
                var tiinputID = -1
                for(var i=0;i< _slef.indexArr.length;i++){
                    for(var j=0;j<_slef.indexArr[i].length;j++) {
                        if ($('.setText').eq(_slef.indexArr[i][0] - 1).val() != undefined) {
                            ar.push($('.setText').eq(_slef.indexArr[i][j] - 1).val())
                        }
                    }
                    if(ar.length>1) {
                        tiinputID++
                        $('.tiinput').eq(tiinputID).find('input').css('visibility', 'visible');
                    }
                    text+='<li class="tishi_list">' +
                            '<p class="oder">'+i+'</p>' +
                            '<input type="text" class="tisInfo">' +
                            '<p class="daan">'+ar.join('') +'</p>'
                    var ar = new Array();

                }

                _slef.tis.html(text);
                s.clearRight(_slef)
            },
            deleteText : function(index,value,_slef){
                if(index>1) {
                    if($(_slef).val()!=''){
                        $(_slef).val('');
                        $('.setText').eq(parseInt(index) - 1).focus();
                    }else {
                        $('.setText').eq(parseInt(index) - 2).val('').focus();
                    }
                }
            },
            textLengt : function(value,index){
                //输入文字逻辑

                    var val = value.split('');
                    if(val.length>1){
                        for(var i=0;i<val.length;i++){
                            $('.setText').eq(parseInt(index)+i-1).val(val[i])

                        }
                        $('.setText').eq(parseInt(index)+val.length-1).focus();
                    }
                    if(val.length==1){
                        $('.setText').eq(parseInt(index)).focus();
                    }

            },
            table_m:function(_slef){
                //模板
                var h = _slef.doms.h.val();
                var l = _slef.doms.l.val();
                var text = "";
                var ac = 0;
                for(var i=0;i<l;i++){
                    text += "<tr class='delage_l'></tr>"
                }
                _slef.doms.tables.html(text);
                for(var i=0;i<l;i++){
                    var textl = '';
                    for(var j=0;j<h;j++){
                        ac++;
                        textl +=
                                '<td>' +
                                '<input class="setText" ' +
                                'index="'+i+'"' +
                                ' od="'+j+'" ' +
                                'ac="'+ac+'" ' +
                                'onkeyup="fes(value,this)" '+
                                ' type="text">' +
                                '</td>'
                    }
                    $('.delage_l').eq(i).html(textl)
                }
            }
        }
        opt.init();
    })(window)
    function fes(value,_self,ev){
        //只允许输入汉字
        var ev = ev||event;
        _self.value=value.replace(/[^\u4E00-\u9FA5]/g,'')
    }
    Array.prototype.unique = function() {
        var ret = [];
        for (var i = 0, j = this.length; i < j; i++) {
            if (ret.indexOf(this[i]) === -1) {
                ret.push(this[i]);
            }
        }

        return ret;
    }
</script>
</html>